extends ../../templates/main.jade

block head
  link(rel="stylesheet" href="style.css")
  script(type="module" src="app.js")

block title
  | Spouštěč interaktivních příběhů | xigoi

block content
  h1 Spouštěč interaktivních příběhů
  noscript Ke správnému fungování této stránky je potřeba mít v prohlížeči povolené skripty.
  #app
    template(v-if="!scene")
      p Příběh:
        input(type="file" accept=".iprib0,.iprib1" v-on:input="loadStoryFromFile($event.target.files[0])")
      p Pohlaví:
        input(name="gender" type="radio" v-model="gender" value="m" id="male-radio")
        label(for="male-radio") Muž
        input(name="gender" type="radio" v-model="gender" value="f" id="female-radio")
        label(for="female-radio") Žena
      p Formalita:
        input(name="formal" type="radio" v-model="formal" v-bind:value="false" id="informal-radio")
        label(for="male-radio") Tykat
        input(name="formal" type="radio" v-model="formal" v-bind:value="true" id="formal-radio")
        label(for="female-radio") Vykat
      p
        input(type="checkbox" v-model="showHistory" id="show-history-checkbox")
        label(for="show-history-checkbox") Zobrazovat historii
      p(v-if="initialScene")
        button(v-on:click="startStory") Spustit
    template(v-else)
      h2 {{name}}
      .history(v-if="showHistory")
        p.history-entry(v-for="entry in history") {{entry}}
      p {{interpolate(scene.description.text)}}
      p.option(v-for="option in scene.options.filter(optionLegal)" v-on:click="triggerOption(option)") {{interpolate(option.text)}}
      p.end-option(v-on:click="endStory") Ukončit
